<template>
  <div id="earnings">
    <!-- 收益展示模块 -->
    <div class="shoWmoney">
      <ul>
        <li
          :style="{
            backgroundImage: `url(${moleft})`,
            color: '#ffffff',
            float: 'left',
          }"
        >
          <p style="font-size: 2vh; font-weight: bold">当天收益</p>
          <p>金额</p>
          <p>
            ￥
            <span :style="{ fontSize: `${dayfon}vh`, paddingTop: `${dayTop}%` }"
              >{{ dayMoeny }}.</span
            >
            00
          </p>
        </li>
        <li :style="{ backgroundImage: `url(${moright})`, float: 'right' }">
          <p style="font-size: 2vh; font-weight: bold">本月收益</p>
          <p>金额</p>
          <p style="font-weight: bold">
            ￥
            <span :style="{ fontSize: `${fosiz}vh`, paddingTop: `${monTop}%` }"
              >{{ monMoeny }}.</span
            >
            00
          </p>
        </li>
      </ul>
    </div>
    <!-- 今日收益模块 -->
    <div class="moenList">
      <van-row
        style="
          width: 100%;
          margin-top: 10%;
          padding: 5% 9%;
          font-size: 2vh;
          font-weight: bold;
          background: #ffffff;
        "
      >
        <van-col>
          <div>当天收益列表</div>
        </van-col>
        <van-col style="float: right">
          <div @click="deletday">
            <van-icon name="delete" />
          </div>
        </van-col>
      </van-row>
      <van-row
        style="padding: 2% 7%; background: #ffffff; width: 100%; margin: auto"
      >
        <van-col style="padding: 2% 0" v-for="(va, ix) in dayList">
          <div style="font-size: 1.42vh">
            <van-icon name="gold-coin" color="#FDE205" /><span
              >&nbsp; 您的客户{{ va.userName
              }}{{
                va.orderSn == undefined || va.orderSn == '' ? '购买' : '开通'
              }}
              &nbsp;</span
            >
            <span> “{{ va.remark }}” </span
            ><span
              >&nbsp;----{{ va.addTime.substr(0, 4) }}年{{
                va.addTime.substr(5, 2)
              }}月{{ va.addTime.substr(8, 2) }}日</span
            >
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 历史收益模块 -->
    <div class="historyList">
      <van-row
        style="
          width: 100%;
          margin-top: 7%;
          padding: 2% 9%;
          font-size: 2vh;
          font-weight: bold;
          background: #ffffff;
        "
      >
        <van-col>
          <div>历史记录</div>
        </van-col>
        <van-col style="float: right">
          <div @click="delet">
            <van-icon name="delete" />
          </div>
        </van-col>
      </van-row>
      <van-row
        style="padding: 2% 7%; background: #ffffff; width: 100%; margin: auto"
      >
        <van-col
          style="padding: 2% 0; width: 100%"
          v-for="(vlaue, index) in list"
        >
          <div style="font-size: 2.2vh">
            <van-icon name="gold-coin" color="#FDE205" /><span
              >&nbsp; {{ vlaue.date }}&nbsp;</span
            >
            <span> --合记收益： </span
            ><span>&nbsp;{{ vlaue.totalMoney }} </span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script type="text/javascript">
import { icon, Col, Row, Toast } from 'vant';
import { daea, toaDay, montal, dayShow, deleDay, deleMonth } from '@/api/api';
import { getLocalStorage } from '@/utils/local-storage.js';
import moleft from '@/assets/images/moeyLeft.png';
import moright from '@/assets/images/moeyRight.png';
export default {
  name: 'earnings',
  data() {
    return {
      moleft: moleft,
      moright: moright,
      userId: getLocalStorage('userId').userId,
      list: '',
      dayMoeny: '',
      monMoeny: '',
      dayList: '',
      fosiz: 4,
      dayfon: 4,
      monTop: 10,
      dayTop: 10,
    };
  },
  watch: {},

  created() {
    this.yesear();
  },

  methods: {
    yesear(mon) {
      // 历史列表
      daea({ userId: Number(this.userId) }).then((res) => {
        this.list = res.data.data;
        // console.log(this.list);
      });
      // 今日总
      toaDay({ userId: Number(this.userId) }).then((res) => {
        // console.log(res);
        this.dayMoeny = res.data.data;
        let daysrr = String(this.dayMoeny).split('');
        if (daysrr.length <= 4) {
          this.dayfon = 4;
          this.dayTop = 10;
        }

        if (daysrr.length >= 5) {
          this.dayfon = 3.5;
          this.dayTop = 15;
        }
        if (daysrr.length >= 6) {
          this.dayfon = 2.5;
          this.dayTop = 20;
        }
        // Toast(daysrr.length);
      });
      // 当月总
      montal({ userId: Number(this.userId) }).then((res) => {
        // console.log(res);
        this.monMoeny = res.data.data;
        let srr = String(this.monMoeny).split('');
        if (srr.length <= 4) {
          this.fosiz = 4;
          this.monTop = 10;
        }

        if (srr.length >= 5) {
          this.fosiz = 3.5;
          this.monTop = 15;
        }
        if (srr.length >= 6) {
          this.fosiz = 2.5;
          this.monTop = 20;
        }

        // Toast(srr.length);
      });
      // 今日列表
      dayShow({ userId: Number(this.userId) }).then((res) => {
        // console.log(res);
        this.dayList = res.data.data.todayList;
      });
    },
    // 删除今日列表
    deletday() {
      deleDay({ userId: Number(this.userId) }).then((res) => {
        // console.log(res);
      });
      this.list.splice(0, this.dayList.length);
    },
    delet() {
      // 删除历史列表
      deleMonth({ userId: Number(this.userId) }).then((res) => {
        // console.log(res);
      });
      this.list.splice(0, this.list.length);
    },
  },
  components: {
    [icon.name]: icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Toast.name]: Toast,
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.shoWmoney {
  position: relative;
  width: 100%;
  height: 36vh;
  margin-top: 10%;
}
.shoWmoney ul {
  width: 90%;
  height: auto;
  margin: auto;
  padding: 10px;
}
.shoWmoney ul li {
  width: 47%;
  height: 36vh;
}
// @media screen and (width: 414px) {
//   .shoWmoney ul li {
//     width: 45%;
//     height: 45%;
//   }
//   .moenList{
//      margin-top: 52%;
//   }
// }
// @media screen and (width: 320px) {

//   .moenList{
//      margin-top: 61% !important;
//   }
// }

.shoWmoney ul li p {
  width: 100%;
  height: auto;
  margin-top:20%;
  text-align: center;
  span {
    display: inline-block;
    font-weight: bold;
  }
}
.moenList {
  width: 85%;
  margin: auto;
  min-height: 25vh;
  background: #ffffff;
  margin-top:7vh;
}
.historyList {
  width: 85%;
  margin: auto;
  min-height: 25vh;
  background: #ffffff;
  margin-bottom: 15px;
}
</style>